<template>
  <div class="info">
    <div style="margin: 20px"></div>
    <p>登录账号</p>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
    >
      <el-form-item label="登录用户名">
        <el-input
          style="width: 200px"
          v-model="this.formLabelAlign.username"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="登录密码">
        <el-input
          style="width: 200px"
          v-model="this.formLabelAlign.password"
          disabled
        ></el-input>
        <el-button
          style="margin-left: 30px"
          type="primary"
          @click="handleClickUpdate()"
          >更改密码</el-button
        >
      </el-form-item>
    </el-form>

    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <el-form
        :model="formLabelAlign"
        :rules="rules"
        ref="formLabelAlign"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="当前密码" prop="password">
          <el-input
            v-model="formLabelAlign.password"
            style="width: 210px"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password2">
          <el-input
            v-model="formLabelAlign.password2"
            style="width: 210px"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password3">
          <el-input
            v-model="formLabelAlign.password3"
            style="width: 210px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 获取token并解析
import request from '@/api/request'
import decodedToken from '@/api/tokenDecode'

export default {
  name: 'AccountSetting',

  data() {
    return {
      labelPosition: 'top',
      dialogVisible: false,

      formLabelAlign: {
        username: decodedToken().claims.username,
        password: '******',
        password2: '',
        password3: '',
      },
      rules: {
        password: [
          {
            required: true,
            message: '请输入旧密码',
            trigger: 'blur',
          },
          {
            min: 6,
            max: 18,
            message: '长度在 6 到 18 个字符',
            trigger: 'blur',
          },
          {
            pattern: /^(\w){6,18}$/,
            message: '只能输入6-18个字母、数字、下划线',
            trigger: 'blur',
          },
        ],
        password2: [
          {
            required: true,
            message: '请输入新密码',
            trigger: 'blur',
          },
          {
            min: 6,
            max: 18,
            message: '长度在 6 到 18 个字符',
            trigger: 'blur',
          },
          {
            pattern: /^(\w){6,18}$/,
            message: '只能输入6-18个字母、数字、下划线',
            trigger: 'blur',
          },
        ],
        password3: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.formLabelAlign.password2) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    handleClickUpdate() {
      this.formLabelAlign.password = ''
      this.dialogVisible = true
    },

    updatePassword() {
      this.$refs.formLabelAlign.validate((valid) => {
        if (valid) {
          request
            .patch('/admin/updatePwd', {
              password: this.formLabelAlign.password,
              newPwd: this.formLabelAlign.password2,
            })
            .then((res) => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success(res.message)
                setTimeout(() => {
                  this.dialogVisible = false
                })
              }
            })
            .catch((error) => {
              this.$message.error(error)
            })
        }
      })
    },
  },
}
</script>

<style scoped></style>
